<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="author" content="Lei Shi">
		<meta http-equiv="Cache-Control" content="o-transform">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="csrf-token" content="1483780974##87f89328c5616669f00302a263fe9061bb852818">


		<title>智慧教学平台</title>

		<meta content="实验楼课程分为基础课和项目课，内容涵盖了Linux、Python、Java、C语言、Ruby、Android、IOS开发、大数据、信息安全等IT技术领域。" name="description">
		<meta content="实验楼课程,IT培训课程,IT实训课程,IT在线课程,all" name="keywords">

		<meta content="" name="author">

		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="../static/font-awesome//4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="../static/highlight.js/9.8.0/monokai-sublime.min.css">
		<link rel="stylesheet" href="../app/css/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="../app/css/libs/katex/0.6.0/katex.min.css">
		<link rel="stylesheet" href="../app/css/libs/videojs/5.11.7/video-js.min.css">
		<link rel="stylesheet" href="../app/css/dest/styles.css?=2016121272249">

		<link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap-theme.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/muke.css">
		<link rel="stylesheet" href="../../js/elementui/index.css">
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/elementui/index.js"></script>
		<script src="../../js/axios.min.js"></script>


		<style>
			@font-face {
			font-family: "lantingxihei";
			src: url("../fonts/FZLTCXHJW.TTF");
		}

        /* modal 模态框*/
        #invite-user .modal-body {
            overflow: hidden;
        }
		#invite-user .modal-body .form-label {
			margin-bottom: 16px;
			font-size:14px;
		}
		#invite-user .modal-body .form-invite {
			width: 80%;
			padding: 6px 12px;
			background-color: #eeeeee;
			border: 1px solid #cccccc;
			border-radius: 5px;
			float: left;
			margin-right: 10px;
		}
		#invite-user .modal-body .msg-modal-style {
			background-color: #7dd383;
			margin-top: 10px;
			padding: 6px 0;
			text-align: center;
			width: 100%;
		}
		#invite-user .modal-body .modal-flash {
			position: absolute;
			top: 53px;
			right: 74px;
			z-index: 999;
		}
		/* end modal */

        .en-footer {
            padding: 30px;
            text-align: center;
            font-size: 14px;
        }
    </style>



	</head>

	<body>
		<!-- 顶部 -->
		<div class="width100 float_l" style="margin-top: -70px;" id="bt">
			<div class="width100 float_l height80 line_hei80">

				<!-- 顶部左边 -->
				<div class="float_l">
					<div class="float_l margin_l20">

						<a href="../../index.html"> <img src="../../img/uiz1.png"></a>

					</div>
					<div class="float_l">
						<ul class="ul_li fon_siz16">
							<li><a class="color_black" href="../courses/index.html">课程</a></li>
							<li><a class="color_black" href="../../department.html">院系</a></li>
							<li><a class="color_black" href="../paths/index.html">名师专栏</a></li>

						</ul>
					</div>
				</div>

				<!-- 顶部右边 -->
				<div class="float_r">
					<div class="float_l top_input">
						<input class="posi_relative" type="text" v-model="query" placeholder="请输入想搜索的内容...">
						<img class="img_sousuo bianshou" src="../../img/uiz4.png" @click="search()">
					</div>
					<div class="float_l margin_l20">
						<img src="../../img/uiz5.png">
					</div>
					<div class="float_l margin_l35">
						<img src="../../img/uiz6.png">
					</div>
					<div class="float_l margin_l30 margin_r40">
						<a class="color_black" href="../user/13/course.html" v-show="isCenter">个人中心</a>
						<a class="btn btn-default navbar-btn sign-in" href="javascript:void(0)" @click="login()" v-show="isShow">登录</a>
						<el-dropdown>
							<div class="color_black" v-show="isCenter">
								<img :src="userPhoto" width="45px">
								<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
							</div>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="shezhi()">设置</el-dropdown-item>
								<el-dropdown-item @click.native="tuichu()">退出</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>

			</div>
		</div>

		<script>
			var bt = new Vue({
				el: "#bt",
				mounted: function() {	
					var roleNames = sessionStorage.getItem("roleNames");
					if (roleNames != null && roleNames == ("学生")) {
						this.isShow = false;
						this.isCenter = true;
						this.userPhoto = sessionStorage.getItem("userPhoto");
					}
				},
				data: {
					isShow: true,
					isCenter: false,
					userPhoto: '',
					query:''
				},
				methods: {
					login: function() {
						window.location.href ="\\login.html?callback-url=http://127.0.0.1/student/curricular/paths/index.html";
					},
					tuichu: function() {
						sessionStorage.clear();
						localStorage.clear();
						window.location.href = "http://127.0.0.1/login.html";
					},
					shezhi:function(){
						window.location.href = "/student/curricular/user/13/personal.html";
					},
					search: function() {
						if (this.query == "") {
							this.$message.error('错了哦，请输入有效的搜索条件！');
							return;
						}
						sessionStorage.setItem("search_name", this.query);
						window.location.href = "/student/search.html"
					}
				}
			});	
		</script>



		<div class="container layout layout-margin-top">
			<div class="row">
				<div class="col-md-9 layout-body">

					<div class="content" id="tea">
						<div class="row">

							<div style="margin-left: 150px;">
								<div class="media bootcamp-courses-item margin_t15" style="width: 500px;" v-for="t in teachers">

									<div class="media-left bootcamp-courses-media">
										<img style="width: 220px;height: 145px" class="media-object" :src="t.teaPhoto" onerror="javascript:this.src='../img/default.jpg';">
									</div>

									<div class="media-body bootcamp-courses-body" style="width: 300px;">
										<div class="bootcamp-courses-info">
											<h4 class="media-heading">{{t.teaDescribe}}</h4>
											<div>
												<p>讲师：{{t.loginName}}</p>
												<p>寄语：{{t.teaTalk}}</p>
											</div>
										</div>
									</div>

								</div>
							</div>

						</div>

						<!--分页条 -->
						<nav class="pagination-container" id="pager">
							<span class="form-inline">
								<select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event,true)">
									<option value="10">10</option>
									<option value="20">20</option>
									<option value="30">30</option>
									<option value="40">40</option>
								</select>
							</span>
							<template v-for="item in pageCount+1">
								<span v-if="item==1" class="btn btn-default" v-on:click="showPage(1,$event)">
									首页
								</span>
								<span v-if="item==1" class="btn btn-default" v-on:click="showPage(pageCurrent-1,$event)">
									上一页
								</span>
								<span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)">
									{{item}}
								</span>
								<span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">
									...
								</span>
								<span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default"
								 v-on:click="showPage(item,$event)">
									{{item}}
								</span>
								<span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">
									...
								</span>
								<span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(item,$event)">
									{{item}}
								</span>
								<span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)">
									下一页
								</span>
								<span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)">
									尾页
								</span>
							</template>
						</nav>


					</div>

				</div>


				<div class="col-md-3 layout-side">

					<div class="panel panel-default panel-userinfo">
						<div class="panel-body body-userinfo">
							<div class="media userinfo-header">
								<div class="media-left">
									<div class="user-avatar">

										<a class="avatar" href="#sign-modal" data-toggle="modal" data-sign="signin">
											<img class="circle" src="../img/logo-grey.png">
										</a>

									</div>
								</div>
								<div class="media-body">

									<span class="media-heading username">欢迎来到易课堂</span>
									<p class="vip-remain">到易课，学知识</p>

								</div>
							</div>

							<div class="row userinfo-data">

								<hr>
								<div class="btn-group-lr">
									<!-- <a href="#sign-modal" type="button" class="btn btn-success col-md-5 col-xs-6 login-btn" data-toggle="modal"
									 data-sign="signin">登录</a>
									<a href="#sign-modal" type="button" class="btn btn-success col-md-5 col-xs-6 col-md-offset-1 register-btn"
									 data-toggle="modal" data-sign="signup">注册</a> -->
								</div>

							</div>

							<div class="userinfo-footer row">
								<div class="col-md-6 col-xs-6 pos-left">

									<!-- 	<a href="#sign-modal" data-toggle="modal" data-sign="signin"><span class="glyphicon glyphicon-bookmark"></span>
										加入私有课</a> -->

								</div>
								<div class="col-md-6 col-xs-6 pos-right">
									<!-- <a href="/contribute" target="_blank"><span class="glyphicon glyphicon-send"></span> 我要投稿</a> -->
								</div>

								<div id="join-private-course" class="modal fade words-ctrl" tabindex="-1" role="dialog">
									<div class="modal-dialog" role="document">
										<div class="modal-content">
											<div class="modal-header">
												<h4 class="modal-title">加入私有课</h4>
											</div>
											<div class="modal-body">
												<div style="margin:15px 0; font:16px;">输入教师提供的私有课程码可以加入教师的私有课程。</div>
												<form id="private-course-form" method="POST" action="/courses/join">
													<div class="form-group">
														<label for="code">邀请码</label>
														<input class="form-control" id="code" name="code" type="text" value="">
														<input name="_csrf_token" type=hidden value="1483786710##0229e038fd44e98fbb3031ffe65d41ef52368b10">
													</div>
												</form>

											</div>
											<div class="modal-footer">
												<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
												<button type="button" class="btn btn-primary" onclick="document.getElementById('private-course-form').submit();">确定</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>


					<div class="sidebox">

						<div class="sidebox-header">
							<h4 class="sidebox-title">最热课程</h4>
						</div>
						<div class="sidebox-body course-content side-list-body" id="zr">
							<a :href="'/student/curricular/courses/show.html?courId='+r.courId" v-for="r in recommended"><img style="width:25px;height:25px"
								 :src="r.courPicurl"> {{r.courName}}</a>
							<!-- <a href="/paths/python"><img style="width:25px;height:25px" src="../img/1471513769430.png"> Python 研发工程师</a> -->
							<!-- 	<a href="/paths/bigdata"><img style="width:25px;height:25px" src="../img/1471513926288.png"> 大数据工程师</a>
							<a href="/paths/cpp"><img style="width:25px;height:25px" src="../img/1471513793360.png"> C++ 研发工程师</a>
							<a href="/paths/security"><img style="width:25px;height:25px" src="../img/1471513867033.png"> 信息安全工程师</a>
							<a href="/paths/linuxsys"><img style="width:25px;height:25px" src="../img/1471514004752.png"> Linux 运维工程师</a> -->
						</div>

					</div>

					<div class="side-image side-qrcode">
						<img src="../img/ShiyanlouQRCode.png">
						<div class="side-image-text">关注公众号，手机看教程</div>
					</div>

				</div>
			</div>
		</div>


		<div class="modal fade" id="invite-user" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">邀请好友，双方都可获赠实验豆！</h4>
					</div>
					<div class="modal-body">

						<p>
							<h4><a href="#sign-modal" data-toggle="modal" data-sign="signin">登录</a>后邀请好友注册，您和好友将分别获赠3个实验豆！</h4>
						</p>

						<div id="msg-modal"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="flash-message" tabindex="-1" role="dialog">
			<div class="modal-dialog" rolw="document">
			</div>
		</div>
		<div class="modal fade" id="modal-message" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						<h4 class="modal-title">注意</h4>
					</div>
					<div class="modal-body">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary confirm" data-dismiss="modal">确定</button>
					</div>
				</div>
			</div>
		</div>



		<script src="../app/dest/lib/lib.js?=2016121272249"></script>
		<script src="../static/jquery/2.2.4/jquery.min.js"></script>
		<script src="../static/ace/1.2.5/ace.js"></script>
		<script src="../static/aliyun/aliyun-oss-sdk-4.3.0.min.js"></script>
		<script src="../static/highlight.js/9.8.0/highlight.min.js"></script>
		<script src="../static/jspdf/1.2.61/jspdf.min.js"></script>
		<script src="../static/plupload/2.1.9/js/plupload.full.min.js"></script>
		<script src="../static/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
		<script src="../static/videojs/video.min.js"></script>
		<script src="../static/bootstrap-tour/0.11.0/js/bootstrap-tour.min.js"></script>
		<script src="../static/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
		<script src="../static/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
		<script src="../static/bootstrap-table/1.11.0/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

		<script src="../static/ravenjs/3.7.0/raven.min.js"></script>
		<!-- <script>
			Raven.config('https://bc3878b7ed0a4468a65390bd79e6e73f@sentry.xxxxxx.com/5', {
				release: '3.12.13'
			}).install();
		</script> -->

		<script src="../app/dest/base/index.js?=2016121272249"></script>
		<script>
			$('.org-body-courses .media h4').each(function() {
				var h = $(this).height();
				if (h > 25) {
					$(this).css({
						width: $(this).width(),
						'white-space': 'nowrap',
						'text-overflow': 'ellipsis',
						overflow: 'hidden'
					});
				}
			});

			var zr = new Vue({
				el: "#zr",
				mounted: function() {
					this.queryTuiJian()
				},
				data: {
					recommended: []
				},
				methods: {
					queryTuiJian: function() {
						axios({
							method: 'get',
							url: '/api/student/home/getRecommended',

						}).then(res => {
							console.log(res.data);
							this.recommended = res.data;
						})
					},
				}
			});


			var teas = new Vue({
				el: "#tea",
				mounted: function() {
					this.queryTeacher()
				},
				data: {
					//分页数据
					teachers: [],
					//总项目数
					totalCount: '',
					//分页数
					pageCount: '',
					//当前页面
					pageCurrent: 1,
					//分页大小
					pagesize: 4,
					//显示分页按钮数
					showPages: 5,
					//开始显示的分页按钮
					showPagesStart: 1,
					//结束显示的分页按钮
					showPageEnd: 20,

				},
				methods: {
					queryTeacher: function() {
						axios({
							method: 'get',
							url: '/api/student/home/getTeachers',
							params: {
								name: "",
								page: this.pageCurrent,
								//没页多少条
								rows: this.pagesize,
								roleName: "老师",
							}
						}).then(res => {
							this.teachers = res.data.rows.map(item => {
								if (item.teaPhoto == null || item.teaPhoto == "") {
									item.teaPhoto = "../img/default.jpg";
								}
								return item;
							});
							this.totalCount = res.data.total;
							this.pageCount = Math.ceil(res.data.total / this.pagesize);
							if (this.pageCount > this.showPages) {

								if (this.pageCurrent <= (this.showPages - 1) / 2) {
									this.showPagesStart = 1;
									this.showPageEnd = this.showPages - 1;
									console.log("showPage1")
								} else if (this.pageCurrent >= this.pageCount - (this.showPages - 3) / 2) {
									this.showPagesStart = this.pageCount - this.showPages + 2;
									this.showPageEnd = this.pageCount;
									console.log("showPage2")
								} else {
									console.log("showPage3")
									this.showPagesStart = this.pageCurrent - (this.showPages - 3) / 2;
									this.showPageEnd = this.pageCurrent + (this.showPages - 3) / 2;
								}
							}

						});
					},
					//分页方法
					showPage: function(pageIndex, $event, forceRefresh) {
						if (pageIndex > 0) { //当pageIndex>0说明pageIndex有值
							if (pageIndex > this.pageCount) { //当pageIndex大于//分页数时，
								pageIndex = this.pageCount; //pageIndex必须=this.pageCount;
							} else {
								//判断数据是否需要更新
								var currentPageCount = Math.ceil(this.totalCount / this.pagesize);
								if (currentPageCount != this.pageCount) {
									pageIndex = 1;
									this.pageCount = currentPageCount;

								} else if (this.pageCurrent == pageIndex && currentPageCount == this.pageCount && typeof(forceRefresh) ==
									"undefined") {

									return;

								}
								this.pageCurrent = pageIndex; //当前页面=pageIndex;
								this.queryTeacher();

							}
							//处理分页点中样式
							var buttons = $("#pager").find("span");
							for (var i = 0; i < buttons.length; i++) {

								if (buttons.eq(i).html() != pageIndex) {

									buttons.eq(i).removeClass("active");
								} else {
									buttons.eq(i).addClass("active");
								}
							}
						}
					}
				}
			})
		</script>



		<!-- 页脚 -->
		<div class="width100 float_l padding_t30 height193">
			<div class="width_1200 margin_auto">
				<div class="width100 float_l text_c margin_b30">
					<a class="img_backg5" href="#"></a>
					<a class="img_backg6 posi_relative wexinmaxianshi" href="#"><i class="weixinweima dis_none"><img src="img/idx-btm.png"></i></a>
					<a class="img_backg7" href="#"></a>
					<a class="img_backg8" href="#"></a>
				</div>
				<div class="width100 float_l text_c yejiao color_gray">
					<a>关于我们</a>
					<a>企业合作</a>
					<a>人才招聘</a>
					<a>讲师招募</a>
					<a>联系我们</a>
					<a>意见反馈</a>
					<a>友情链接</a>
				</div>
				<div class="width100 float_l text_c border_t margin_t20 padding_t20 color_gray fon_siz12">
					<span>© 2016 imoroc.com 京ICP备13042132号</span>
				</div>
			</div>
		</div>

	</body>
</html>
